<template>
    <section class="villageStatistics">
            <swiper class="swiper-no-swiping" v-show="isshow" :style="dqwidth" :options="swiperOption" >
               <div class="swiper-pagination" slot="pagination" style=" margin-top: -80px;height: 40px;margin-bottom: 80px;width: 80%"></div>
                <swiper-slide>
                    <div class="slider-content"  >
                        <div class="title">
                          <span>年龄结构分析</span>
                          <el-cascader
                            ref="cascaderAge"
                            v-if="user.sysDistrict.districtLevel !== 3"
                            class="select_age"
                            :options="selectList"
                            clearable
                            :props="{value: 'districtId',label: 'districtName',children: 'orgChildren',checkStrictly: true}"
                            @change="handleSelectChange"
                            placeholder="请选择查看"
                          ></el-cascader>
                        </div>
                        <div class="statisticsNumber statisticsNumber_age" >
                            <div style="flex:16">
                                <div style="display: flex">
                                    <el-card v-for="(item, index) in ageList" @click.native="clickAge(item, index)" shadow="never" :class="`statisticsNumberCard age-statisticsNumberCard ${activeItemIndex === index ? 'card-item-active' : ''}`" >
                                        <label class="el-upload-list__item-status-label self-define"><i class="el-icon-upload-success el-icon-check"></i></label>
                                        <p >
                                            <template>
                                                <CountTo :startVal="0" :endVal="item.val" :duration="1300" class="top_value"></CountTo>
                                                <span class="unit_label" v-if="item.name.indexOf('年龄')>-1">岁</span>
                                                <span class="unit_label" v-else>人</span>
                                            </template>
                                        </p>
                                        <p class="top_label">{{item.name}}</p>
                                    </el-card>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;clear: both;height: 65%;margin-left: 40px">
                            <div id="age" style="flex: 9;height: 500px"></div>
                            <div class="listStyle" >
                                <SecretaryExport @handleChildClick="handleChildClick" :cadresType="cadresType" :apiRoot="apiRoot" :query="ageQuery" ></SecretaryExport>
                            </div>
                        </div>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="slider-content">
                        <div class="title">
                          <span>任职年限分析</span>
                          <el-cascader
                              ref="cascaderNum"
                              v-if="user.sysDistrict.districtLevel !== 3"
                              class="select_age"
                              :options="selectList"
                              clearable
                              :props="{value: 'districtId',label: 'districtName',children: 'orgChildren',checkStrictly: true}"
                              @change="handleSelectChange"
                             ></el-cascader>
                        </div>
                        <div class="statisticsNumber">
                            <div style="flex:16">
                                <div style="display: flex">
                                    <el-card v-for="(item, index) in workDurationList" shadow="never" @click.native="clickYear(item, index)"  :class="`statisticsNumberCard ${activeItemIndex === index ? 'card-item-active' : ''}`">
                                        <label class="el-upload-list__item-status-label self-define"><i class="el-icon-upload-success el-icon-check"></i></label>
                                        <p>
                                            <template>
                                                <CountTo :startVal="0" :endVal="item.val" :duration="1300" class="top_value"></CountTo>
                                                <span class="unit_label">人</span>
                                            </template>
                                        </p>
                                        <p class="top_label">{{item.name}}</p>
                                    </el-card>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;clear: both;height: 65%">
                            <div id="workDuration" style="flex: 9;height: 100%"></div>
                            <div class="listStyle">
                                <SecretaryExport @handleChildClick="handleChildClick" :cadresType="cadresType" :apiRoot="apiRoot" :query="workDurationQuery" ></SecretaryExport>
                            </div>
                        </div>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="slider-content">
                        <div class="title" style="margin-top: 55px!important;">
                          <span>学历情况分析</span>
                          <el-cascader
                            ref="cascaderEdu"
                            v-if="user.sysDistrict.districtLevel !== 3"
                            class="select_age"
                            :options="selectList"
                            clearable
                            :props="{value: 'districtId',label: 'districtName',children: 'orgChildren',checkStrictly: true}"
                            @change="handleSelectChange"
                          ></el-cascader>
                        </div>
                        <div class="statisticsNumber">
                            <div style="flex:16">
                                <div style="display: flex">
                                    <el-card v-for="(item, index) in eduList" shadow="never" @click.native="clickEdu(item, index)"  :class="`statisticsNumberCard ${activeItemIndex === index ? 'card-item-active' : ''}`">
                                        <label class="el-upload-list__item-status-label self-define"><i class="el-icon-upload-success el-icon-check"></i></label>
                                        <p>
                                            <template>
                                                <CountTo :startVal="0" :endVal="item.val" :duration="1300" class="top_value"></CountTo>
                                                <span class="unit_label">人</span>
                                            </template>
                                        </p>
                                        <p class="top_label">{{item.name}}</p>
                                    </el-card>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;clear: both;height: 65%">
                            <div id="education" style="flex: 9;height: 100%"></div>
                            <div class="listStyle">
                                <SecretaryExport @handleChildClick="handleChildClick" :cadresType="cadresType" :apiRoot="apiRoot" :query="educationQuery" ></SecretaryExport>
                            </div>
                        </div>
                    </div>
                </swiper-slide>
                <swiper-slide v-if="user.sysDistrict.districtLevel !== 3">
                    <div class="slider-content slider-content-age">
                        <div class="title" style="margin-top: 55px!important;">
                          <span>年龄比例分析</span>
                           <el-select v-if="user.sysDistrict.districtLevel == 1" class="select_age" v-model="value" placeholder="请选择" clearable @change="handleAgeChange">
                            <el-option
                              v-for="item in selectList"
                              :key="item.value"
                              :label="item.districtName"
                              :value="item.districtId">
                            </el-option>
                          </el-select>
                        </div>
                        <div class="age_distribution" style="overflow: auto; height: 651px">
                          <!-- <div class="age_distribution_title">全市各村的年龄比例</div> -->
                          <div class="age_distribution_content">
                            <table>
                                  <tr v-for="(item, index) in ageDistributionList" :key="index">
                                    <td class="left_td">
                                      <div class="left">{{item.name.replace("党委", "")}}</div>
                                    </td>
                                    <td class="right_td">
                                      <div class="row">
                                        <div class="right_item"
                                            v-for="subItem in item.statistics"
                                            :key="subItem.index">
                                          <p>{{subItem.v1}} : {{subItem.v2}} : {{subItem.v3}}</p>
                                          <div>{{subItem.name.replace("支部", "")}}</div>
                                        </div>
                                      </div>
                                    </td>
                                  </tr>
                            </table>
                          </div>
                        </div>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="slider-content">
                        <div class="title">
                            <span>报酬结构分析</span>
                            <el-select v-if="user.sysDistrict.districtLevel == 1" class="select_age" v-model="rewardSelectValue" placeholder="请选择" clearable @change="handleRewardChange">
                                <el-option
                                    v-for="item in selectList"
                                    :key="item.value"
                                    :label="item.districtName"
                                    :value="item.districtId">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="statisticsNumber">
                            <div style="flex:16">
                                <div style="display: flex">
                                    <!--不显示全职村干部、事业编、公务员-->
                                    <el-card v-for="(item, index) in rewardList" shadow="never" @click.native="clickReward(index)"  v-if="index!=2 && index !=3 && index!=4"
                                             :class="`statisticsNumberCard ${activeItemIndex === index ? 'card-item-active' : ''}`">
                                        <label class="el-upload-list__item-status-label self-define"><i class="el-icon-upload-success el-icon-check"></i></label>
                                        <p>
                                            <template>
                                                <CountTo :startVal="0" :endVal="item.val" :duration="1300" class="top_value"></CountTo>
                                                <span class="unit_label">元</span>
                                            </template>
                                        </p>
                                        <p class="top_label">{{item.name}}</p>
                                    </el-card>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;clear: both;height: 65%;margin-top: 50px">
                            <div id="reward" style="flex: 9;height: 100%"></div>
                        </div>
                    </div>
                </swiper-slide>
                <swiper-slide v-if="user.sysDistrict.districtLevel !== 3">
                    <div class="slider-content slider-content-age">
                        <div class="title" style="margin-top: 55px!important;">
                            <span>自定义分析</span>
                        </div>
                            <el-select v-if="user.sysDistrict.districtLevel == 1" class="select_age" v-model="selectValue" placeholder="请选择" clearable @change="handleCustomChange">
                                <el-option
                                    v-for="item in selectList"
                                    :key="item.value"
                                    :label="item.districtName"
                                    :value="item.districtId">
                                </el-option>
                            </el-select>
                        <div style="text-align: left;margin: 50px 30px;">
                            <h4 style="margin: 20px 0">查询条件列表</h4>
                            <el-button  @click="addToList()" type="primary">添加</el-button>
                            <el-table :data="queryFields" style="margin-top: 10px">
                                <el-table-column label="查询条件">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.filedName" clearable placeholder="请选择需要匹配的字段" @change="(val)=>{getType(val,scope.$index)}">
                                            <el-option v-for="item in fields" :key="item.id" :value="item.name" :label="item.des"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column label="匹配方式" prop="comparison">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.comparison" clearable placeholder="请选择匹配方式">
                                            <el-option v-for="item in searchTypeOption" :key="item.value" :value="item.value" :label="item.label"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column label="匹配值">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.comparison==='在范围内'" class="specialInput">
                                            <el-input v-model="scope.row.valueMin" style="float: left"></el-input>
                                            <div  style="float: left" > &nbsp;&nbsp;至&nbsp;&nbsp;</div>
                                            <el-input v-model="scope.row.valueMax" style="float: left"></el-input>
                                        </div>
                                        <div v-else>
                                            <el-input v-model="scope.row.valueMin"></el-input>
                                        </div>
                                    </template>
                                </el-table-column>

                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="text" @click="del(scope.$index)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <br>
                            <div>
                                <el-button type="primary" size="small" @click="loadQueryFields()">查询</el-button>
                                <el-button type="primary" size="small" @click="downLoad()">下载</el-button>
                            </div>
                            <div style="display: flex;clear: both;height: 65%">
                                <div id="query-result" style="flex: 9;height: 600px"></div>
                                <div class="listStyle" v-if="queryResult">
                                    <SecretaryExport :apiRoot="queryApiRoot" type="result" :query="personQueryFields" :cadresType="cadresType" :districtId="selectValue" ></SecretaryExport>
                                </div>
                            </div>
                        </div>
                    </div>
                </swiper-slide>
            </swiper>
            <el-dialog
              append-to-body
              :visible.sync="showBaseInfoDiaVis"
              class="showBaseInfoDiaVis"
              width="90%">
              <el-form label-position="right" label-width="80px" :model="detailInfo">
                  <el-row :gutter="10" style="margin-top: 20px">
                      <el-col :span="4">
                          <el-card shadow="hover" style="height: 320px"  >
                              <el-image :src=detailInfo.headSculpture style="width: 160px;height: 240px;margin-top:20px "></el-image>
                              <div class="name-post1" style="width: 160px;height: 45px;display: inline-block;top: 0px;">
                                  <div style="font-size: 14px;color: black">
                                      {{detailInfo.districtName || "暂无" }} --
                                      <span style="font-size: 14px;color: black"> {{detailInfo.name || "暂无"}} </span>
                                  </div>
                              </div>
                          </el-card>
                      </el-col>
                      <el-col :span="10">
                          <el-card shadow="hover" style="height: 320px;" class="baseMassage">
                              <div class="cardTitleStyle">
                                  <el-image  class="smallTitle" src="../../../static/img/jbry.png"></el-image>
                                  <p>基本人员信息</p>
                              </div>
                              <el-col :span="12">
                                  <div class="baseInfoDiv">
                                      <span class="baseLabel">性别</span>
                                      <span class="baseVal">{{detailInfo.sex||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv">
                                      <span class="baseLabel">出生日期</span>
                                      <span class="baseVal">{{detailInfo.birth||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv">
                                      <span class="baseLabel">民族</span>
                                      <span class="baseVal">{{detailInfo.nation||"暂无"}}</span>
                                  </div>
                                  <div class="baseInfoDiv">
                                      <span class="baseLabel">籍贯</span>
                                      <span class="baseVal">{{detailInfo.nativePlace||"暂无"}}</span>
                                  </div>
                                        </el-col>
                                        <el-col :span="12">
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">身份证号</span>
                                                <span class="baseVal">{{detailInfo.identityCard||"暂无"}}
                                                <el-popover
                                                    v-show="detailInfo.identityCardAnnex"
                                                    placement="right"
                                                    width="330"
                                                    trigger="hover">
                                                    <div v-for="subItem in handleImage(detailInfo.identityCardAnnex)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text"><i class="el-icon-picture"></i></el-button>
                                                </el-popover>
                                            </span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">联系电话</span>
                                                <span class="baseVal">{{detailInfo.contact||"暂无"}}</span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">医疗保险</span>
                                                <span class="baseVal">{{detailInfo.medicalInsurance||"暂无"}}</span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">养老保险</span>
                                                <span class="baseVal">{{detailInfo.socialSecurityDatabases||"暂无"}}</span>
                                            </div>
                                        </el-col>
                                    </el-card>
                                </el-col>
                                <el-col :span="10">
                                    <el-card shadow="hover" style="height: 320px" class="workMessage">
                                        <div class="cardTitleStyle">
                                            <el-image  class="smallTitle" src="../../../static/img/gz.png"></el-image>
                                            <p>基本工作信息</p>
                                        </div>
                                        <el-col :span="12">
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">入党时间</span>
                                                <span class="baseVal">{{detailInfo.partyTime||"暂无"}}
                                                <el-popover
                                                    v-show="detailInfo.partyTimeAnnex"
                                                    placement="right"
                                                    width="330"
                                                    trigger="hover">
                                                    <div v-for="subItem in handleImage(detailInfo.partyTimeAnnex)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text"><i  class="el-icon-picture"></i></el-button>
                                                </el-popover>
                                            </span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">出生地</span>
                                                <span class="baseVal">{{detailInfo.birthPlace||"暂无"}}</span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">健康状况</span>
                                                <span class="baseVal">{{detailInfo.health||"暂无"}}</span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">全日制学历</span>
                                                <span class="baseVal">{{detailInfo.fullTimeEdu||"暂无"}}
                                                    <el-popover
                                                        v-show="detailInfo.educationAnnex"
                                                        placement="right"
                                                        width="330"
                                                        trigger="hover">
                                                        <div  style="height: 600px;overflow-x: scroll">
                                                            <div v-for="subItem in handleImage(detailInfo.educationAnnex)" >
                                                                <el-image :src="subItem"></el-image>
                                                            </div>
                                                        </div>
                                                        <el-button slot="reference" type="text"><i  class="el-icon-picture"></i></el-button>
                                                    </el-popover>
                                                </span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">在职学历</span>
                                                <span class="baseVal">{{detailInfo.partTimeEdu||"暂无"}}</span>
                                            </div>
                                        </el-col>
                                        <el-col  :span="12">
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">来源情况</span>
                                                <span class="baseVal">{{detailInfo.personnelType||"暂无"}}</span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">专技职称</span>
                                                <span class="baseVal">{{detailInfo.professionalTitle||"暂无"}}
                                                 <el-popover
                                                     v-show="detailInfo.professionalTitleAnnex"
                                                     placement="bottom"
                                                     width="330"
                                                     trigger="hover">
                                                     <div v-for="subItem in handleImage(detailInfo.professionalTitleAnnex)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text"><i  class="el-icon-picture"></i></el-button>
                                                </el-popover>
                                            </span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">担任职务</span>
                                                <el-tooltip :content="handlePost(detailInfo.cadresPost)" placement="top" v-if="detailInfo.cadresPost&&handlePost(detailInfo.cadresPost).length>10">
                                                    <span class="baseVal">{{handlePost(detailInfo.cadresPost).substring(0,10)}}...</span>
                                                </el-tooltip>
                                                <span class="baseVal" v-else>{{handlePost(detailInfo.cadresPost)}}</span>

                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">全日制学校</span>
                                                <span class="baseVal">{{detailInfo.fullTimeSchool||"暂无"}}</span>
                                            </div>
                                            <div class="baseInfoDiv">
                                                <span class="baseLabel">在职学校</span>
                                                <span class="baseVal">{{detailInfo.partTimeSchool||"暂无"}}</span>
                                            </div>
                                        </el-col>
                                    </el-card>
                                </el-col >
                            </el-row>
                        </el-form>
                        <!-- <el-row :gutter="40" style="margin-top: 40px">
                            <el-col :span="8">
                                <el-card shadow="hover"  class="workExperience">
                                    <div class="cardTitleStyle">
                                        <el-image  class="smallTitle" src="../../../static/img/jl.png"></el-image>
                                        <p>工作简历</p>
                                    </div>
                                    <el-col :span="24"  class="Secoll"  style="padding:0px 20px!important;">
                                        <el-timeline  :reverse="true">
                                            <el-timeline-item
                                                v-for="(activity, index) in handleWorkExperience(item.workExperience)"
                                                :key="index" style="text-align: left">
                                                {{activity}}
                                            </el-timeline-item>
                                        </el-timeline>
                                    </el-col>
                                    <el-col :span="6" :offset="19">
                                        <el-popover
                                            placement="right"
                                            width="400"
                                            trigger="hover">
                                            <el-timeline  :reverse="true">
                                                <el-timeline-item
                                                    v-for="(activity, index) in handleWorkExperience(item.workExperience)"
                                                    :key="index" style="text-align: left">
                                                    {{activity}}
                                                </el-timeline-item>
                                            </el-timeline>
                                            <span class="more" slot="reference">更多 >></span>
                                        </el-popover>
                                    </el-col>
                                </el-card>
                            </el-col>
                            <el-col :span="8">
                                <el-card shadow="hover"  class="repaid" >
                                    <div class="cardTitleStyle">
                                        <el-image  class="smallTitle" src="../../../static/img/bc.png"></el-image>
                                        <p>报酬情况</p>
                                    </div>
                                    <el-col :span="24" class="Secoll">
                                        <div v-if="item.rewards.length===0">
                                            <el-image  class="nullBg" src="../../../static/img/nrzw.png"></el-image>
                                        </div>
                                        <div v-else style="padding-left:20px">
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">获取时间</span>
                                                <span class="baseCardVal">{{item.rewards[0].achieveTime ? new Date(item.rewards[0].achieveTime).getFullYear() + '年' : '未填'}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">基本报酬(元/年)</span>
                                                <span class="baseCardVal">{{item.rewards[0].basicReward||0}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">考核报酬(元/年)</span>
                                                <span class="baseCardVal">{{item.rewards[0].reviewReward||0}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">增收奖励(元/年)</span>
                                                <span class="baseCardVal">{{item.rewards[0].otherReward||0}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">其他(元/年)</span>
                                                <span class="baseCardVal">{{item.rewards[0].des||0}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">总报酬(元/年)</span>
                                                <span class="baseCardVal">{{item.rewards[0].totalReward}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">佐证材料</span>
                                                <span class="baseCardVal">
                                                <el-popover
                                                    placement="right"
                                                    width="400"
                                                    trigger="hover" v-if="item.rewards[0].supportDoc">
                                                    <div v-for="subItem in handleImage(item.rewards[0].supportDoc)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text"><i class="el-icon-picture"></i></el-button>
                                                </el-popover>
                                                <span v-else>暂无</span>
                                            </span>
                                            </el-col>
                                        </div>
                                    </el-col>
                                    <el-col :span="6" :offset="19">
                                        <el-popover
                                            placement="right"
                                            width="480"
                                            trigger="hover">
                                            <div class="popoverScroll">
                                                <div v-for="sub in item.rewards">
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">获取时间</span>
                                                        <span class="baseCardVal">{{sub.achieveTime ? new Date(sub.achieveTime).getFullYear() + '年' : '未填'}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">基本报酬(元/年)</span>
                                                        <span class="baseCardVal">{{sub.basicReward||0}}</span>
                                                    </el-col>
                                                    <el-col :span="12"class="baseInfoCard">
                                                        <span class="baseCardLabel">考核报酬(元/年)</span>
                                                        <span class="valueStyle">{{sub.reviewReward}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">增收奖励(元/年)</span>
                                                        <span class="baseCardVal">{{sub.otherReward||0}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">其他(元/年)</span>
                                                        <span class="baseCardVal">{{sub.des||0}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">总报酬(元/年)</span>
                                                        <span class="baseCardVal">{{sub.totalReward||0}}</span>
                                                    </el-col>
                                                    <el-col :span="24" class="baseInfoCard" v-if="sub.supportDoc" >
                                                        <span class="baseCardLabel">佐证材料</span>
                                                        <div v-for="subItem in handleImage(sub.supportDoc)" class="popoverImage">
                                                            <el-image :src="subItem" ></el-image>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="24" class="baseInfoCard" v-else>
                                                        <span class="baseCardLabel">佐证材料</span>
                                                        <span class="baseCardLongVal">暂无</span>
                                                    </el-col>
                                                    <hr class="popoverLine">
                                                </div>
                                            </div>
                                            <span class="more" slot="reference" v-if="item.rewards.length>1">更多 >></span>
                                        </el-popover>
                                    </el-col>
                                </el-card>
                            </el-col>
                            <el-col :span="8">
                                <el-card shadow="hover"  class="inCountry">
                                    <div class="cardTitleStyle">
                                        <el-image  class="smallTitle" src="../../../static/img/relation.png"></el-image>
                                        <p>在村工作具有近亲属关系人员</p>
                                    </div>
                                    <el-col :span="24"  class="Secoll">
                                        <div v-if="item.familyWorkInfoVOS.length===0">
                                            <el-image  class="nullBg" src="../../../static/img/nrzw.png"></el-image>
                                        </div>
                                        <div v-else>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">姓名</span>
                                                <span class="baseCardVal">{{item.familyWorkInfoVOS[0].name}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">称谓</span>
                                                <span class="baseCardVal">{{item.familyWorkInfoVOS[0].appellation}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">政治面貌</span>
                                                <span class="baseCardVal">{{item.familyWorkInfoVOS[0].politicalStatus}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">职务</span>
                                                <span class="baseCardVal">{{item.familyWorkInfoVOS[0].job}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">在村工作时长</span>
                                                <span class="baseCardVal">{{item.familyWorkInfoVOS[0].duration ? item.familyWorkInfoVOS[0].duration + '年' : '暂无'}}</span>
                                            </el-col>
                                        </div>
                                    </el-col>
                                    <el-col :span="6" :offset="19">
                                        <el-popover
                                            placement="right"
                                            width="480"
                                            trigger="hover">
                                            <div class="popoverScroll">
                                                <div  v-for="sub in item.familyWorkInfoVOS">
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">姓名</span>
                                                        <span class="baseCardVal">{{sub.name}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">称谓</span>
                                                        <span class="baseCardVal">{{sub.appellation}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">政治面貌</span>
                                                        <span class="baseCardVal">{{sub.politicalStatus}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">职务</span>
                                                        <span class="baseCardVal">{{sub.job}}</span>
                                                    </el-col>
                                                    <el-col :span="24" class="baseInfoCard">
                                                        <span class="baseCardLabel">在村工作时长</span>
                                                        <span class="baseCardLongVal">{{sub.duration ? sub.duration + '年' : '暂无'}}</span>
                                                    </el-col>
                                                    <hr class="popoverLine">
                                                </div>
                                            </div>
                                            <span class="more" slot="reference" v-if="item.familyWorkInfoVOS.length>1">更多 >></span>
                                        </el-popover>
                                    </el-col>
                                </el-card>
                            </el-col>
                        </el-row>
                        <el-row :gutter="40" style="margin-top: 40px">
                            <el-col :span="8">
                                <el-card shadow="hover" class="honer" >
                                    <div class="cardTitleStyle">
                                        <el-image  class="smallTitle"  src="../../../static/img/jc.png"></el-image>
                                        <p>奖惩情况</p>
                                    </div>
                                    <el-col :span="24" class="Secoll"  >
                                        <div v-if="item.honours.length===0">
                                            <el-image  class="nullBg" src="../../../static/img/nrzw.png"></el-image>
                                        </div>
                                        <div v-else>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">奖或惩</span>
                                                <span class="baseCardVal">{{item.honours[0].rewardsType}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">时间</span>
                                                <span class="baseCardVal">{{item.honours[0].achieveTime}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard" v-show="item.honours[0].rewardsType == '表彰'">
                                                <span class="baseCardLabel">表彰级别</span>
                                                <span class="baseCardVal">{{item.honours[0].honourDescription}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard" v-show="item.honours[0].rewardsType == '表彰'">
                                                <span class="baseCardLabel">特殊表彰</span>
                                                <span class="baseCardVal">{{item.honours[0].honourType||'暂无'}}</span>
                                            </el-col>
                                            <el-col :span="24" class="baseInfoCard" >
                                                <span class="baseCardLabel">奖惩内容</span>
                                                <span class="baseCardLongVal">{{item.honours[0].content||'暂无'}}</span>
                                            </el-col>
                                            <el-col :span="12" class="baseInfoCard">
                                                <span class="baseCardLabel">佐证材料</span>
                                                <span class="baseCardVal">
                                                <el-popover
                                                    placement="right"
                                                    width="400"
                                                    trigger="hover" v-if="item.honours[0].supportDoc">
                                                    <div v-for="subItem in handleImage(item.honours[0].supportDoc)" >
                                                        <el-image :src="subItem"></el-image>
                                                    </div>
                                                    <el-button slot="reference" type="text"><i class="el-icon-picture"></i></el-button>
                                                </el-popover>
                                                <span v-else>暂无</span>
                                            </span>
                                            </el-col>
                                        </div>
                                    </el-col>
                                    <el-col :span="6" :offset="19">
                                        <el-popover
                                            placement="right"
                                            width="480"
                                            trigger="hover">
                                            <div class="popoverScroll">
                                                <div v-for="sub in item.honours" >
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">奖或惩</span>
                                                        <span class="baseCardVal">{{sub.rewardsType}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard">
                                                        <span class="baseCardLabel">时间</span>
                                                        <span class="baseCardVal">{{sub.achieveTime}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard" v-show="sub.rewardsType == '表彰'">
                                                        <span class="baseCardLabel">表彰级别</span>
                                                        <span class="baseCardVal">{{sub.honourDescription}}</span>
                                                    </el-col>
                                                    <el-col :span="12" class="baseInfoCard" v-show="sub.rewardsType == '表彰'">
                                                        <span class="baseCardLabel">特殊表彰</span>
                                                        <span class="baseCardVal">{{sub.honourType||'暂无'}}</span>
                                                    </el-col>
                                                    <el-col :span="24" class="baseInfoCard" >
                                                        <span class="baseCardLabel">奖惩内容</span>
                                                        <span class="baseCardLongVal">{{sub.content}}</span>
                                                    </el-col>
                                                    <el-col :span="24" class="baseInfoCard" v-if="sub.supportDoc">
                                                        <span class="baseCardLabel">佐证材料</span>
                                                        <div v-for="subItem in handleImage(sub.supportDoc)" class="popoverImage">
                                                            <el-image :src="subItem"></el-image>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="24"  class="baseInfoCard" v-else>
                                                        <label><span class="baseCardLabel">佐证材料</span>
                                                            <span class="baseCardLongVal" >暂无</span>
                                                        </label>
                                                    </el-col>
                                                    <hr class="popoverLine">
                                                </div>
                                            </div>
                                            <span class="more" slot="reference" v-if="item.honours.length>1">更多 >></span>
                                        </el-popover>
                                    </el-col>
                                </el-card>
                            </el-col>
                        </el-row> -->
            </el-dialog>
        <el-dialog width="30%"
                   title="选择需要导出的字段"
                   :visible.sync="transferVis"
                   append-to-body
                   :before-close="handleTransferClose">
            <el-transfer  :titles="['可选择字段', '导出字段']" v-model="transferValue" :data="transferData"></el-transfer>
            <div slot="footer" class="dialog-footer  footer-position">
                <el-button type="primary" @click="downFile()">确 定</el-button>
                <el-button @click="handleTransferClose">返 回</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import CommonCRUD from "@/components/CommonCRUD";
    import HonoursStrcutre from "@/views/data/HonoursStrcutre";
    import { swiper, swiperSlide } from 'vue-awesome-swiper';
    import CountTo from 'vue-count-to';
    import SecretaryExport from "../SecretaryExport";
    import LookUp from '@/lookup';
    export default {
        name: "VillageStatistics",
        data(){
            return{
                value: '',
                showBaseInfoDiaVis: false,
                detailInfo: {},
                user: {},
                selectList: [],
                ageDistributionList: [],
                showTitle : true,
                dqwidth : 'width:70%;float: left;margin-left: 30px;',
                isshow:true,
                colorList:['#7fb1b7','#db9982','#a5d0bc','#8eb09a','#cb9444','#7d7b91'],
                columns:[],
                query:[],
                apiRoot:'identity/villageCadres',
                queryApiRoot:'identity/statistics',
                districtId: JSON.parse(sessionStorage.getItem("userInfo")).districtId,
                queryForm:[
                    {
                        name: 'cadresType',
                        type: 'string',
                        value: 'IN_SECRETARY',
                        visible: false
                    },
                    {
                        name: 'districtId',
                        type: 'string',
                        value: JSON.parse(sessionStorage.getItem("userInfo")).districtId,
                        visible: false
                    },
                    {
                        name:'hasRetire',
                        type: 'string',
                        value: '0',
                        visible: false
                    }
                ],
                cadresType:"IN_SECRETARY",   //村干部
                swiperOption: {
                    freeMode: false,
                    direction: 'horizontal',
                    slidesPerView: 1,
                    spaceBetween: 30,
                    mousewheel: true,
                    pagination: '.swiper-pagination',
                    paginationClickable: true,
                    paginationBulletRender(swiper, index, className) {
                        let nameList = ['年龄结构分析', '任职年限分析','学历情况分析','年龄比例分析','报酬结构分析','自定义分析']; // ,'年龄比例分析'
                         return '<button class=" ' + className + '  primary "   id="passage'+index+'" ><span>' + nameList[index] + '</span></button>'
                    },
                    onSlideChangeEnd: async (swiper) => {
                        this.activeIndex = swiper.activeIndex;
                        this.activeItemIndex = ''
                        this.queryForm[1].value = JSON.parse(sessionStorage.getItem("userInfo")).districtId
                        this.districtId = this.queryForm[1].value;
                        this.ageQuery = this.queryForm.concat();
                        this.workDurationQuery = this.queryForm.concat();
                        this.educationQuery = this.queryForm.concat();
                        this.initAge();
                        this.initWorkDuration();
                        this.initEducation();
                        this.$nextTick(() => {
                          let obj = {}
                          obj.stopPropagation = () =>{}
                          try{
                              this.$refs.cascaderAge.clearValue(obj)
                              this.$refs.cascaderNum.clearValue(obj)
                              this.$refs.cascaderEdu.clearValue(obj)
                          }catch(err){
                              this.$refs.cascaderAge.handleClear(obj)
                              this.$refs.cascaderNum.handleClear(obj)
                              this.$refs.cascaderEdu.handleClear(obj)
                          }
                        })
                    },
                },
                ageList: [],
                eduList: [],
                workDurationList: [],
                rewardList: [],
                partyStandingList: [],
                activeIndex: 0,
                queryFields: [],
                activityList:[],
                project:[
                    ['性别'],
                    ['年龄'],
                    ['学历'],
                    ['工作'],
                    ['在职时间'],
                    ['党龄'],
                    ['表彰'],
                    ['惩罚'],
                ],
                projectList:{
                    '性别':['男',   '女'],
                    '年龄':['35岁以下','36岁','37岁','38岁','39岁','40岁', '41岁', '42岁','43岁','44岁','45岁','46岁','47岁','48岁','49岁','50岁','50岁以上'],
                   '学历':['研究生','本科','大专','高中及以下'],
                    '工作':['公务员','事业编制','企业主','全职村干部'],
                    '在职时间':['在职时间1年以下','在职时间1-5年','在职时间6-10年','在职时间11-15年','在职时间16-20年','在职时间20年以上'],
                    '级别':['一级村干部','二级村干部','三级村干部','四级村干部','五级村干部'],
                    '党龄':['党龄小于1年','党龄1-5年','党龄6-10年','党龄11-15年','党龄16-20年','党龄20年以上'],
                   '表彰':['获得句容市级表彰次数','获得镇江市级表彰次数','获得省级表彰次数','获得党中央国务院表彰次数',],
                   '惩罚':['获得句容市级处分次数','获得镇江市级处分次数','获得省级处分次数','获得党中央国务院处分次数',]
                },
                ageQuery:[],
                workDurationQuery:[],
                educationQuery: [],
                queryResult:false,
                transferVis:false,
                transferValue: [],
                transferData: [],
                activeItemIndex: '',
                fields:[],
                personQueryFields:[],
                searchTypeOption:[
                    {label:'大于',value:'大于'},
                    {label:'小于',value:'小于'},
                    {label:'等于',value:'等于'},
                    {label:'大于等于',value:'大于等于'},
                    {label:'小于等于',value:'小于等于'},
                    {label:'在范围内',value:'在范围内'},
                    {label:'模糊匹配',value:'模糊匹配'},
                ],
                selectValue:'',
                rewardSelectValue:'',
            }
        },
        methods:{
          handleChildClick(data){
            this.showBaseInfoDiaVis = true;
            this.detailInfo = data
          },
          handleImage(imageUrl){
                let arr = [];
                if(imageUrl){
                    if(imageUrl.indexOf(',')>-1){
                        imageUrl.split(',').forEach(item => {
                            arr.push(item.split('&')[0]);
                        })
                    }else{
                        arr.push(imageUrl.split('&')[0]);
                    }
                }
                return arr;
          },
          handlePost(value){
              if(value){
                  let endValue = [];
                  if(value.indexOf(',')>0){
                      let arr = value.split(',');
                      arr.forEach(item=>{
                          endValue.push(LookUp['Post'].filter(sub=>sub.value===item)[0].label);
                      })
                  }else{
                      endValue.push(LookUp['Post'].filter(sub=>sub.value===value)[0].label);
                  }
                  return endValue.join('、');
              }else{
                  return '暂无'
              }
          },
          handelDqFd(){
              this.dialogTableVisible = false;
              this.dqwidth = 'width:100%;float: left;'
              this.dqFd = false;
              this.dqSx = true;
              this.showTitle = false
          },
          showData(url) {
            return this.$http('GET',`/identity/statistics/`+url+"/"+this.districtId+"/"+this.cadresType).then(data =>{
                return data;
              })
          },
          loadTown() {
                let towns = JSON.parse(sessionStorage.getItem('towns'));
                if(this.user.sysDistrict.districtLevel==1){
                    this.selectList = towns;
                }else if(this.user.sysDistrict.districtLevel==2){
                    this.selectList = towns.filter(item=>item.districtId === this.user.districtId);
                }
          },
          initAge(){
                this.showData('getAgeStatistics').then(data => {
                    let xData = [];
                    let lineData = [];
                    let yData = [];
                    this.ageList = data.content;
                    data.content.forEach(item=>{
                        if(item.name.indexOf("周岁")!=-1){
                            xData.push(item.name);
                            yData.push({name:item.name,value:item.val})
                        }
                    });
                    this.$nextTick(()=>{
                        this.showAge(xData,yData,lineData);
                    })
                });
          },
          initEducation(){
                this.showData('getEduStatistics').then(data => {
                    let xData = [];
                    let yData = [];
                    this.eduList = data.content;
                    data.content.forEach(item=>{
                       xData.push(item.name);
                       yData.push({name:item.name,value:item.val});
                    });
                    this.$nextTick(()=>{
                        this.showEducation(xData,yData);
                    })
                });
          },
          initWorkDuration(){
                this.showData('getServingYearStatistics').then(data => {
                    let xData = [];
                    let yData = [];
                    this.workDurationList = data.content;
                    data.content.forEach(item=>{
                        xData.push(item.name);
                        yData.push({name:item.name,value:item.val})
                    });
                    this.$nextTick(()=>{
                        this.showWorkDuration(xData,yData);
                    });
                });
          },
          initReward(){
              this.showData('getSalaryStatistics').then(data => {
                  this.rewardList = data.content;
                  let districtId = '01';
                  if (this.rewardSelectValue){
                      districtId = this.rewardSelectValue;
                  }else{
                      districtId = '01'
                  }
                  this.$http("GET", `identity/statistics/getSalaryStatisticsList/1/${this.cadresType}/${districtId}`, false).then(data => {
                    let xData = [];
                    let yData = [];
                    let legend = [];
                    data.forEach(item => {
                        xData.push(item.name);
                        yData.push(item.val);
                    });
                    this.$nextTick(()=>{
                        this.showReward(legend,xData,yData,this.rewardList[0].val);
                    })
                })

              });
          },
          showAge(xData,yData,lineData){
                let self = this;
                let ageChart = echarts.init(document.getElementById("age"));
                let option =  {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: xData
                    },
                    series: [
                        {
                            name: '人数',
                            selectedMode: 'single',
                            type: 'pie',
                            radius: '70%',
                            center: ['50%', '50%'],
                            data:yData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                ageChart.setOption(option);
                ageChart.on('click', function (params) {
                    if(params.componentSubType==='pie'){
                        let agePara = {};
                        self.ageQuery = self.queryForm.concat();
                        if(params.name==='35周岁以下'){
                            agePara = {name: 'age', type: 'string', value: '35', visible: false};
                        }else if(params.name==='35-50周岁'){
                            agePara = {name: 'age', type: 'string', value: '50',visible: false};
                        }else if(params.name==='50周岁以上'){
                            agePara = {name: 'age', type: 'string', value: '-1', visible: false};
                        }
                        agePara.cadresType = "IN_SECRETARY";
                        self.ageQuery.push(agePara);
                    }
                });
          },
          clickAge(item, index){
                if (index !== 0 && index !== 1) {
                  this.activeItemIndex = index;
                }
                let params = Object.assign(item);
                if(params.name.indexOf('年龄')>-1){
                    return ;
                };
                let self = this;
                let agePara = {};
                self.ageQuery = self.queryForm.concat();
                if(params.name==='35周岁以下'){
                    agePara = {name: 'age', type: 'string', value: '35', visible: false};
                }else if(params.name==='35-50周岁'){
                    agePara = {name: 'age', type: 'string', value: '50',visible: false};
                }else if(params.name==='50周岁以上'){
                    agePara = {name: 'age', type: 'string', value: '-1', visible: false};
                }
                self.ageQuery.push(agePara);
          },
          handleSelectChange(e) {
            if (!e[e.length-1]) {
              this.districtId = JSON.parse(sessionStorage.getItem("userInfo")).districtId;
              this.queryForm[1].value = this.districtId;
              this.ageQuery = this.queryForm.concat();
              this.workDurationQuery = this.queryForm.concat();
              this.educationQuery = this.queryForm.concat();
              this.initAge();
              this.initEducation();
              this.initWorkDuration();

            } else {
              this.districtId = e[e.length-1];
              this.queryForm[1].value = this.districtId;
              this.ageQuery = this.queryForm.concat();
              this.workDurationQuery = this.queryForm.concat();
              this.educationQuery = this.queryForm.concat();
              this.initAge();
              this.initEducation();
              this.initWorkDuration();
            }
          },
          // 年龄比例分析
          handleAgeChange(e){
            if (e) {
                this.districtId = e;
                this.getAgeCountByDistrict();
            } else {
                this.districtId = JSON.parse(sessionStorage.getItem("userInfo")).districtId;
                this.getAgeCountByDistrict();
            }
          },
          showEducation(xData,yData){
                let self = this;
                let eduChart = echarts.init(document.getElementById("education"));
                let option = {
                    color:self.colorList,
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: xData
                    },
                    series: [
                        {
                            name: '人数',
                            selectedMode: 'single',
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '50%'],
                            data:yData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                eduChart.setOption(option);
                eduChart.on('click', function (params) {
                    self.educationQuery = self.queryForm.concat()
                    let educationPara = {name: 'fullTimeEdu', type: 'string', value: params.name, visible: false};
                    self.educationQuery.push(educationPara);
                });
          },
          clickEdu(item, index) {
              // console.log(item);
              // console.log(this.queryForm, '47444');

              let params = Object.assign(item);
              let self = this;
              this.activeItemIndex = index;
              self.educationQuery = self.queryForm.concat();
              let educationPara = {name: 'fullTimeEdu', type: 'string', value: params.name, visible: false};
              self.educationQuery.push(educationPara);
          },
          showWorkDuration(xData,yData){
                let self = this;
                let workChart = echarts.init(document.getElementById("workDuration"));
                let option =  {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: xData
                    },
                    series: [
                        {
                            name: '人数',
                            selectedMode: 'single',
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '50%'],
                            data:yData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                workChart.setOption(option);
                workChart.on('click', function (params) {
                    let workPara = {};
                    self.workDurationQuery = self.queryForm.concat();
                    if(params.name==='不满1年'){
                        workPara = {name: 'onDutyTime', type: 'string', value: '1', visible: false};
                    }else if(params.name==='1-5年'){
                        workPara = {name: 'onDutyTime', type: 'string', value: '5',visible: false};
                    }else if(params.name==='5-10年'){
                        workPara = {name: 'onDutyTime', type: 'string', value: '10', visible: false};
                    }else if(params.name==='10-15年'){
                        workPara = {name: 'onDutyTime', type: 'string', value: '15', visible: false};
                    }else if(params.name==='15-20年'){
                        workPara = {name: 'onDutyTime', type: 'string', value: '20', visible: false};
                    }else if(params.name==='20年以上'){
                        workPara = {name: 'onDutyTime', type: 'string', value: '-1', visible: false};
                    }
                    self.workDurationQuery.push(workPara);
                });
          },
          clickYear(item, index){
                let params = Object.assign(item);
                let self = this;
                this.activeItemIndex = index;
                let workPara = {};
                self.workDurationQuery = self.queryForm.concat();
                if(params.name==='不满1年'){
                    workPara = {name: 'onDutyTime', type: 'string', value: '1', visible: false};
                }else if(params.name==='1-5年'){
                    workPara = {name: 'onDutyTime', type: 'string', value: '5',visible: false};
                }else if(params.name==='5-10年'){
                    workPara = {name: 'onDutyTime', type: 'string', value: '10', visible: false};
                }else if(params.name==='10-15年'){
                    workPara = {name: 'onDutyTime', type: 'string', value: '15', visible: false};
                }else if(params.name==='15-20年'){
                    workPara = {name: 'onDutyTime', type: 'string', value: '20', visible: false};
                }else if(params.name==='20年以上'){
                    workPara = {name: 'onDutyTime', type: 'string', value: '-1', visible: false};
                }
                self.workDurationQuery.push(workPara);
          },
          loadAllstatistic() {
                this.$http('get', '/identity/statistics/getAllStatistics', false).then(
                    data => {
                     let arr = ['男', '女','35岁以下','36岁','37岁','38岁','39岁','40岁', '41岁', '42岁','43岁','44岁','45岁','46岁','47岁','48岁','49岁','50岁','50岁以上',
                         '研究生','本科','大专','高中及以下','公务员','事业编制','企业主','全职村干部',
                         '在职时间1年以下','在职时间1-5年','在职时间6-10年','在职时间11-15年','在职时间16-20年','在职时间20年以上'
                         ,'一级村干部','二级村干部','三级村干部','四级村干部','五级村干部',
                         ,'党龄小于1年','党龄1-5年','党龄6-10年','党龄11-15年','党龄16-20年','党龄20年以上',
                         '获得句容市级表彰次数','获得镇江市级表彰次数','获得省级表彰次数','获得党中央国务院表彰次数',
                         '获得句容市级处分次数','获得镇江市级处分次数','获得省级处分次数','获得党中央国务院处分次数'
                     ]
                     let tempArr = [];
                     data.content.forEach(item => {
                         let split = item.value.split('_');
                         let temp = {
                             name: item.name
                         }
                         arr.forEach((item, index) => {
                             temp[item] = split[index];
                         });
                         tempArr.push(temp)
                     });
                     this.activityList =  tempArr;
                    }
                )
          },
          getType(val,index) {
                this.fields.forEach(item => {
                    if (item.name === val) {
                        // console.log(this.queryFields,item.type,item.des)
                        this.queryFields[index].filedType = item.type;
                        this.queryFields[index].des = item.des;
                    }
                })
          },
          async getAgeCountByDistrict(){
            const res = await this.$http('GET',`/identity/statistics/getAgeCountByDistrict/${this.cadresType}/${this.districtId}`, false);
            this.ageDistributionList = res
          },
            showReward(legend,xData,yData,avg){
                let self = this;
                let rewardChart = echarts.init(document.getElementById("reward"));
                let option = {
                    tooltip: {
                        trigger: 'axis',
                    },
                    xAxis: {
                        type: 'category',
                        data: xData,
                        axisLabel:{
                            interval: 0
                        },
                    },
                    yAxis: {
                        type: 'value',
                        name:'元'
                    },
                    series: [{
                        data:yData,
                        type:'bar',
                        barWidth: 50,
                        itemStyle: {
                            normal: {
                                label: {
                                    formatter: function (val) {
                                        return `${val.value}元`
                                    },
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'black',
                                        fontSize: 16,
                                        fontWeight: 'bold'
                                    }
                                },
                                color: '#55bd94'
                            }
                        },
                        markPoint: {
                            data: [
                                {
                                    type: 'max', name: '最大值',color:'#fff',
                                    itemStyle:{
                                        color: '#0d8dea',
                                    }
                                },
                                {
                                    type: 'min', name: '最小值',color:'#fff',
                                    itemStyle:{
                                        color: '#cf3c32',
                                    }
                                }
                            ],
                            symbolOffset: ['0%', '-50%'],
                            symbolSize: [70,50],
                            label:{
                                formatter: function (data){
                                    return data.name;
                                }
                            },
                        },
                        markLine : {
                            data : [{
                                yAxis: avg          // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                            }],
                            lineStyle: {
                                normal: {
                                    color: '#fa4f47',
                                },
                            },
                        }
                    }]
                };
                rewardChart.setOption(option);
            },
            clickReward(index) {
                this.activeItemIndex = index;
                index++;
                let districtId = '01';
                if (this.rewardSelectValue){
                    districtId = this.rewardSelectValue;
                }else{
                    districtId = '01'
                }
                this.$http("GET", `identity/statistics/getSalaryStatisticsList/${index}/${this.cadresType}/${districtId}`, false).then(data => {
                    let xData = [];
                    let yData = [];
                    let legend = [];
                    data.forEach(item => {
                        xData.push(item.name);
                        yData.push(item.val);
                    });
                    this.$nextTick(()=>{
                        this.showReward(legend,xData,yData,this.rewardList[index-1].val);
                    })
                })
            },
            handleRewardChange(e){
                if (e) {
                    this.districtId = e;
                    this.initReward();
                } else {
                    this.districtId = JSON.parse(sessionStorage.getItem("userInfo")).districtId;
                    this.initReward();
                }
            },
            /*自定义查询*/
            loadFields() {
                this.$http('POST', '/identity/sysClassProperty/list', {classId: 'aa1ed29d-45b5-4b5f-85cf-fd6a7a5e5932'}, false).then(
                    data => {
                        if (data.length !== 0) {
                            this.fields = data;
                        }
                    }
                )
            },
            /*自定义分析添加查询条件*/
            addToList() {
                this.queryFields.push({filedType:'',des:'',tableName: 'VillageCadres'});
                /* this.queryFields.push(Object.assign({}, this.fieldForm));*/
            },
            /*自定义删除查询条件*/
            del(index) {
                this.queryFields.splice(index, 1);
            },
            /*自定义图数据*/
            loadQueryFields() {
                this.$http('POST', `/identity/statistics/getCustomStatistics?cadresType=${this.cadresType}&districtId=${this.selectValue}`, this.queryFields, false).then(
                    data => {
                        if(data){
                            this.queryResult = true;
                            this.personQueryFields = this.queryFields.concat();
                            this.$nextTick(()=>{
                                let xData = [];
                                let yData = [];
                                data.statistics.forEach(item => {
                                    xData.push(item.name);
                                    yData.push(item.val);
                                });
                                this.showQueryResult(xData, yData);
                            })
                        }else{
                            this.$message({
                                type:'warning',
                                message:'查询条件不符合要求，请输入符合要求的查询条件！'
                            })
                        }
                    }
                )
            },
            /*自定义图*/
            showQueryResult(xData,yData) {
                let self = this;
                let queryChart = echarts.init(document.getElementById("query-result"));
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        data: xData
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xData,
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLabel: {
                                interval: 0,
                                rotate: 45
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '人数',
                            axisLabel: {
                                formatter: '{value} 人'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '人数',
                            type: 'bar',
                            data: yData,
                            barWidth: '60%',
                            itemStyle: {
                                normal: {
                                    label: {
                                        formatter: function (val) {
                                            return `${val.value}人`
                                        },
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: '#999',
                                            fontSize: 14,
                                            fontWeight: 'bold'
                                        }
                                    },
                                    color: function (params) {
                                        return self.colorList[params.dataIndex % 6]
                                    }
                                }
                            },
                        },
                    ]
                };
                queryChart.setOption(option);
            },
            /*自定义下载*/
            downLoad(){
                this.transferData = [];
                this.fields.forEach(item=>{
                    this.transferData.push({label:item.des,key:item.id+"&"+item.name+"&"+item.des})
                });
                this.transferVis = true;
            },
            handleTransferClose(){
                this.transferValue = [];
                this.transferVis = false;
            },
            downFile(){
                let valueArr = [];
                this.transferValue.forEach(item=>{
                    valueArr.push({filedName:item.split("&")[1],filedDesc:item.split("&")[2]})
                });
                let para = {
                    searchFields:this.queryFields,
                    exportFields:valueArr,
                };
                this.$http('POST',`identity/statistics/export?cadresType=${this.cadresType}&districtId=${this.selectValue}`,para,false).then( content =>{
                    window.open(content.file);
                });
                this.transferValue = [];
                this.transferVis = false;
            },
            /*自定义按镇分析*/
            handleCustomChange(){

            },
        },
        components:{
            CommonCRUD,
            swiper,
            swiperSlide,
            CountTo,
            SecretaryExport
        },
        created() {
            this.columns = this.$store.state.classInfo.properties;
            this.user = JSON.parse(sessionStorage.getItem('userInfo'));
        },
        mounted() {
            this.initAge();
            this.handelDqFd();
            this.initEducation();
            this.initWorkDuration();
            this.loadAllstatistic();
            this.loadTown();
            this.getAgeCountByDistrict();
            this.loadFields();
            this.initReward();

        }
    }
</script>


<style>
    .HzClass {
    :width: 40%;float: left;
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        color: #303133;
        -webkit-transition: .3s;
        transition: .3s;
    }
    .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 20px;
        width: 80px;
    }
    .primary {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 10px 10px;
        font-size: 14px;
        border-radius: 4px;
        margin-left: 2px;
        opacity: 1;
    }
    .villageStatistics  .swiper-pagination-bullet-active {
        color: #fff!important;
        background: #007aff!important;
    }
    .villageStatistics .el-card {
        position: relative;
    }
    .villageStatistics .el-card__body {
        padding: 0px!important;
    }
    .villageStatistics .swiper-pagination {
        top: 90px!important;
        line-height: 35px;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
        float: left!important;
        margin-top: -80px;

    }
    .villageStatistics .slider-content {
        margin-top: 80px;
        height: 1100px;
        /* border: 1px solid #EBEEF5; */
        background-color: transparent;
        color: #303133;
        -webkit-transition: .3s;
        transition: .3s;
    }

    .villageStatistics .slider-result-content {
        height: 970px;
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        color: #303133;
        -webkit-transition: .3s;
        transition: .3s;
    }
    .villageStatistics .swiper-pagination-bullet-active:after span {
        color: #007aff;
    }
    .villageStatistics .specialInput .el-input--mini .el-input__inner{
        width: 100px !important;
    }
    .villageStatistics .specialInput .el-input--mini{
        width: 100px !important;
    }

</style>

<style scoped>
    .select_age {
      float: right;
      position: relative;
      top: -40px!important;
      right: 30px!important;
    }
    .el-cascader {
      top: 50px;
      height: 30px;
      left: -30px;
    }
    .tableCol{
        width:600px;
        display: inline-block;
        vertical-align: top;
        margin-top: -3px;
        margin-left: -2px;
        position: relative;
        top: -80px;
        left: -70px;
    }
    .tableCol td{
        height: 60px;
        font-size: 16px;
    }
    .tableColContent{
        background-color: #f3f3f3;
        width: 150px;
        font-family:' 黑体';
        font-weight:bold;
        line-height:35px;
        font-size: 14px!important;
        height: 35px!important;
        text-align: center;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical;
        padding-left: 5px;
        padding-right: 5px;
    }

    .tableCol::-webkit-scrollbar {
        width: 0;
    }
    .tableContent{
        width: 100%;
        display: inline-block;
        text-align: center;
        margin-top: -3px;
    }

    .tableContent button{
        height: 100px;
        width: 100px;
        padding:3px 3px;
        border-radius:4px;
        background-color: #F4F4F4;
        font-size: 14px;
    }
    .tableContent > tr > td > div{
        height: 25px;
        width: 100px;
    }
    .tableContent .sta-content *{
        width: 150px;
        font-size: 14px;
        color: white;
        height: 35px;
        line-height: 35px;
        letter-spacing: 2px;
        transition: all .3s;
    }
    .tableContent .sta-content :hover{
        cursor: pointer;
        transform: scale(1.1);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px transparent;
    }
    .tableline{
        position:relative;
        width:150px;
        height:75px;
        box-sizing:border-box;
        border:1px solid rgba(227,213,213,0.55);
        background: rgb(211, 80, 67);
        color: white;
    }

    .result-table {
        width: calc(100% - 100px);
        overflow-x: scroll;
        position: relative;
    }

    .tableline::before{
        content:"";
        position:absolute;
        left: 17px;
        top: 4px;
        width:112px;
        height:33px;
        box-sizing:border-box;
        border-bottom:1px solid rgba(227,213,213,0.55);
        transform-origin:bottom center;
        transform:rotateZ(26deg) scale(1.5);
    }

    .quert-result {
        width: 300px;
        height: 400px;
    }
    .villageStatistics {
        width: 100%;
        height: 1200px;
        overflow: hidden;
    }
    .villageStatistics .title {
        margin: 55px 0 0 0  !important;
        display: block;
        font-size: 20px;
        line-height: 20px;
        text-align: left;
        background: linear-gradient(60deg, #66aabb, #43a047)!important;
        box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28)!important;
        color: #fff;
    }
    .villageStatistics .title span {
        position: relative;
        top: -10px;
        padding-left: 10px;
        font-weight: bold;
    }
    .villageStatistics .title:before {
        width: 6px;
        height: 40px;
        content: ' ';
        display: inline-block;
    }

    .villageStatistics .unit_label{
        font-size: 14px;
        font-weight: 400;
        line-height: 30px;
        color: #858585;
        vertical-align: bottom;
    }

    .villageStatistics .top_label {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: #858585;
        padding: 0 30px;
        text-align: center;
    }
    .villageStatistics .listStyle{
        flex: 7;
        text-align: left;
        margin-left: 20px;
        margin-top: 30px;
    }
    .villageStatistics .top_value {
        font-size: 28px;
        font-weight: 400;
        line-height: 22px;
        color: #333;
        vertical-align: middle;
    }
    .villageStatistics .statisticsNumber{
        width: 100%;
        display: flex;
        height: 10%;
        margin-top: 20px;
        /* padding: 0 20px; */
        justify-content: space-between;
    }
    .statisticsNumber .el-card {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 30px;
    }
    .villageStatistics .statisticsNumberCard{
        flex: 2;
        text-align: center;
        line-height: 40px;
        margin: 0 10px;
        cursor: pointer;
        background:#F1FFF3;
        border:1px solid rgba(10, 155, 26, 1);
        border-radius:4px;
    }
    .villageStatistics .statisticsNumberCard:hover {
        transform: scale(1.05);
    }
    .villageStatistics  .age-statisticsNumberCard:nth-child(-n+2) {
        margin: 0;
        cursor: default;
        transform: none;
        background-color: #FFFFFF;
        color: #0A9B1A;
    }
    .villageStatistics  .age-statisticsNumberCard:nth-child(1) {
        border-radius: 4px 0 0 4px;
        border-right: 1px dashed #0A9B1A;
        margin-left: 10px;
    }
    .villageStatistics .age-statisticsNumberCard:nth-child(2) {
        margin-right: 10px;
        border-radius: 0 4px 4px 0;
        border-left: none;
    }
</style>

<style lang="less">
    .villageStatistics .self-define {
        position: absolute;
        right: -19px;
        top: -6px;
        width: 56px;
        height: 24px;
        background: #13ce66;
        text-align: center;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
        box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
        display: none;
    }
    .villageStatistics .self-define i {
        color: white;
        transform: rotate(-45deg);
        font-weight: 700;
        top: -4px;
        left: 3px;
        position: relative;
    }
    .card-item-active .self-define {
        display: block;
    }
    .villageStatistics  .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        -webkit-transition: .1s;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        padding: 10px 10px;
        font-size: 14px;
        border-radius: 4px;
        margin-left: 6px;
        margin-bottom: 4px;
        width: 100px;
        height: 40px;
    }

    .translate-enter{
        opacity: 0;
        transform: translateY(100px) translateX(10px) scale3d(2,2,6);
    }
    .translate-leave-to{
        opacity: 0;
    }
    .translate-enter-active{
        transition: all 0.8s ease;
    }
    .translate-leave-active{
        transition: all 0s ease;
    }

    .translate-hide-enter, .translate-hide-leave-active {
        transform: scale(0);
        opacity: 0;
    }
    .work_select {
      position: relative;
      height: 40px;
      left: 40px;
    }
    .right-detail .el-button.is-circle {
        padding: 2px;
    }
    .detail-row .el-input--mini .el-input__inner {
        width: 185px !important;
    }
    @media screen and (max-width: 1430px) {
        .right-detail {
            font-size: 14px;
        }
    }
    .el-timeline .el-loading-mask {
        height: 300px;
    }
    .el-cascader-menu {
      width: 198px;
    }
    .villageStatistics .slider-content-age {
      // height: 100%;
    }
    .age_distribution {
      padding: 20px 20px;
      width: 100%;
      .age_distribution_title {
        font-size: 24px;
      }
      .age_distribution_content {
        margin: 10px 0 20px 50px;
        .left_td {
          position: relative;
          width: 120px;
          .left {
            position: absolute;
            top: 0;
            left: 0;
            float: left;
            width: 120px;
            height: 80px;
            border-bottom: 1px solid #ccc;
            line-height: 80px;
          }
        }
        .right_td {
          padding-bottom: 10px;

          .right_item {
            float: left;
            // margin-top: 10px;
            // display: inline-block;
            width: 120px;
            height: 80px;
            border: 1px solid #cccccc;
            border-radius: 3px;
            margin-left: 10px;
            margin-bottom: 6px;

            p {
              margin-top: 15px;
              font-size: 20px;
            }
            div {
              margin-top: 10px;
              font-size: 18px;
            }
          }
        }
      }
    }
</style>

<style scoped>
    .nullMessage {
        position: relative;
        margin: 0 auto;
        color: #777;
        font-size: 16px;
    }
    .nullCgb {
        width: 255px;
        height: 200px;
        background-size: 100%,100%;
        background-image: url("../../../static/messageBg/null.png");
        position: relative;
        margin: 100px auto 20px auto;
    }
    .nullBg {
        width: 220px;
        height: 160px;
        background-size: 100%, 100%;
        margin: 0 auto;
    }
    .baseMassage {
        background-image: url("../../../static/messageBg/cardBg.png");
        background-size: 100% 100%;
    }
    .workMessage {
        background-image: url("../../../static/messageBg/workMessageBg.png");
        background-size: 100% 100%;
    }
    .workExperience {
        height: 300px;
        background-image: url("../../../static/messageBg/workExperienceBg.png");
        background-size: 100% 100%;
    }
    .repaid {
        height: 300px;
        background-image: url("../../../static/messageBg/repaidBg.png");
        background-size: 100% 100%;
    }
    .family {
        height: 300px;
        background-image: url("../../../static/messageBg/familyBg.png");
        background-size: 100% 100%;
    }
    .inCountry {
        height: 300px;
        background-image: url("../../../static/messageBg/inCountryBg.png");
        background-size: 100% 100%;
    }
    .train {
        height: 300px;
        background-image: url("../../../static/messageBg/trainBg.png");
        background-size: 100% 100%;
    }
    .honer {
        height: 300px;
        background-image: url("../../../static/messageBg/honerBg.png");
        background-size: 100% 100%;
    }
    .assessment {
        height: 300px;
        background-image: url("../../../static/messageBg/assessmentBg.png");
        background-size: 100% 100%;
    }

    .gallery-top {
        height: 80%;
        width: 100%;
    }
    .gallery-thumbs {
        height: 20%;
        box-sizing: border-box;
    }
    .gallery-thumbs .swiper-slide {
        width: 170px;
        height: 245px;
        opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide .head-list-item {
        width: 150px;
        height: 225px;
        margin: 10px 0;
        position: relative;
        transition: all .4s;
    }
    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }
    .gallery-thumbs .swiper-slide-active .head-list-item {
        opacity: 1;
        box-shadow: 0 2px 12px 0 rgba(255, 19, 1, 0.3);
        transform: translateY(-10px) scale(1.1);
    }


    .showBaseInfoDiaVis .cardTitleStyle{
        position: relative;
        text-align: left;
        font-size: 18px;
        font-weight: bold;
        margin:20px 20px 30px 20px ;
        color: #B50C0A;

    }
    .name-post {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        background-color: rgba(64, 158, 255, .8);
        position: relative;
        top: -40px;
        height: 34px;
        overflow: hidden;
    }
    .name-post1 {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        position: relative;
        top: -40px;
        height: 34px;
        overflow: hidden;
    }
    .showBaseInfoDiaVis .smallTitle{
        vertical-align: middle;
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 3px;
        margin-right: 3px;
    }
    .showBaseInfoDiaVis .Secoll{
        height: 180px;
        overflow: hidden;
        padding: 0px!important;
    }
    .showBaseInfoDiaVis .more{
        width:100px;
        height:14px;
        font-size:14px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:rgba(181,12,10,1);
        line-height:30px;
        cursor: pointer;
    }
    .lableColor{
        font-size:16px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:rgba(169,5,2,1);
        line-height:30px;
    }
    .valueStyle {
        font-size:16px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:rgba(57,57,57,1);
        line-height:30px;
    }
    .showBaseInfoDiaVis .el-card{
        border: 1px solid #FD9090!important;
    }
    .showBaseInfoDiaVis .support-area {
        position: relative;
        top: -4px;
    }
    .showBaseInfoDiaVis .baseInfoDiv{
        font-size: 14px;
        line-height: 40px;
    }
    .baseInfoDiv span span {
        vertical-align: middle;
    }
    .showBaseInfoDiaVis .baseLabel{
        width: 84px;
        display: inline-block;
        text-align: right;
        vertical-align: top;
        color: rgba(169,5,2,1);
    }
    .showBaseInfoDiaVis .baseVal{
        width: 170px;
        display: inline-block;
        text-align: center;
        vertical-align: top;
    }
    .baseInfoCard{
        font-size: 14px;
        line-height: 34px;
        padding: 0!important;
        text-align: left;
    }
    .baseCardLabel{
        width: 100px;
        display: inline-block;
        text-align: right;
        vertical-align: top;
        color: rgba(169,5,2,1);
    }
    .baseCardVal{
        width: 85px;
        display: inline-block;
        text-align: left;
        vertical-align: top;
        margin-left: 6px;
    }
    .baseCardLongVal{
        width: 285px;
        display: inline-block;
        text-align: left;
        vertical-align: top;
        margin-left: 6px;
    }
    .popoverLine{
        border:1px dotted rgba(145, 145, 145, 0.38);
    }
    .popoverScroll{
        overflow-x: scroll;
        max-height: 700px;
    }
    .popoverImage{
        width: 350px;
        margin-left: 30px;
    }
    .showBaseInfoDiaVis el-col{
        padding: 0px!important;
    }
</style>
